<template>
    <div class="vedioMain">
        <!-- 视频上下滑动条 -->
        <el-carousel height="450px" direction="vertical" :autoplay="false" indicator-position='none' ref="domVedio"
            @change="vedioChange" @wheel.passive="scrollVedio($event)">
            <el-carousel-item>
                <vedioMain :vedioSrcFirst="vedioSrcFirst"></vedioMain>
            </el-carousel-item>
            <el-carousel-item>
                2222
                <el-card class="box-card">
                    <video :src="vedioSrcSecond" controls>
                    </video>
                </el-card>
            </el-carousel-item>
            <el-carousel-item>
                333
                <el-card class="box-card">
                    <video :src="vedioSrcThird" controls>
                    </video>
                </el-card>
            </el-carousel-item>
        </el-carousel>

    </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import vedioMain from './vedioMain.vue'

const domVedio = ref(null)
interface CustomElement extends HTMLDivElement {
    [key: string]: any;
}

// 刚进入这个页面的时候就要获取视频对象数组，每调用一次接口就有10个视频
// 从接口获取视频的对象
interface videoObj {
    id: string,
    url: string
}
let vedio1: videoObj = {
    id: '1',
    url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'

}
let vedio2: videoObj = {
    id: '2',
    url: 'http://www.w3school.com.cn/example/html5/mov_bbb.mp4'

}
let vedio3: videoObj = {
    id: '3',
    url: 'https://www.w3schools.com/html/movie.mp4'

}
// http://vfx.mtime.cn/Video/2021/07/10/mp4/210710171112971120.mp4
let vedio4: videoObj = {
    id: '4',
    url: 'http://vjs.zencdn.net/v/oceans.mp4'

}
// 获取了10个元素
let vedioArrGet = [vedio1, vedio2, vedio3, vedio1, vedio2, vedio3, vedio1, vedio2]
console.log(vedioArrGet);
// 页面渲染的时候的第一个元素
// index用来标记现在在那个视频元素里面
let index = 0
let vedioSrcFirst = ref(vedio1.url)




function limitGet(fn: Function, delay: number) {
    let curTime = 0
    return function () {
        let args = arguments, nowTime = Date.now()
        if (nowTime - curTime >= delay) {
            curTime = Date.now()
            return fn(args)
        }
    }

}
// 用节流函数封装上下滑动的函数
let limitDownPlay = limitGet(downPlay, 1500)
let limitUpPlay = limitGet(upPlay, 1500)
// 滚动视频的时候这个页面调用的方法
function scrollVedio(event: WheelEvent) {
    // 判断滚动方向
    let direction = event.deltaY > 0 ? 'down' : 'up';  //deltaY为正则滚轮向下，为负滚轮向上
    if (direction == 'down') {
        // 调用向下的函数
        limitDownPlay()
    } else {
        limitUpPlay()
    }

}
function downPlay() {
    if (index < vedioArrGet.length) {
        // 调用向下的函数的时候就添加第二个元素
        index++
        // 向下的话调用向下的函数
        if (domVedio.value !== null) {
            (domVedio.value as CustomElement)?.next();
        }
    }

}
function upPlay() {
    if (index > 0) {
        index--
        if (domVedio.value !== null) {
            (domVedio.value as CustomElement)?.prev();
        }
    }


}

let vedioSrcSecond = ref('')
let vedioSrcThird = ref('')
// 这个函数就是用来切换vedio的src的
function vedioChange(newIndex: number, oldIndex: number) {
    console.log(oldIndex, newIndex);
    // 给这个newIndex的vedio添加src
    if (domVedio.value !== null) {
        // 说明需要刷新列表了
        if (index < 0) {
            //新列表
            vedioArrGet = vedioArrGet
            index = 0

        }
        // 获取到当前的视频元素，添加src
        // (domVedio.value as CustomElement).carousel.$children[newIndex]
        // 调用接口获取新的元素
        if (index >= vedioArrGet.length) {
            // 这里用async await就能实现
            vedioArrGet.push(vedio4)
        }
        if (newIndex == 0) {
            vedioSrcFirst.value = vedioArrGet[index].url
        }
        else if (newIndex == 1) {
            vedioSrcSecond.value = vedioArrGet[index].url
        }
        else if (newIndex == 2) {
            vedioSrcThird.value = vedioArrGet[index].url
        }
    }




}



</script>
<style  scoped>
.vedioMain {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.box-card {
    height: 100%;
}

/* .el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
} */
</style>
